<template>
    <Header title="店铺"></Header>
    <div class="foodClassify">
        <!-- 上部店铺名称 -->
        <div class="name">
            {{ title }}
            <img :src="img" class="store_img">

        </div>

        <!-- 选项卡 -->
        <div class="classify">
            <van-tabs>
                <van-tab v-for="(i,index) in storeData" :title="i.name" >
                    <FoodList :foodData = "i.data"></FoodList>
                </van-tab>
            </van-tabs>

        </div>

        <!-- 底部 -->
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="users.$state.newList.length" @click="toCart" />
            <!-- <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" /> -->
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>

</template>

<script setup>
import Header from '@/components/Header.vue';
import FoodList from './FoodList.vue';
import {onMounted, reactive, toRefs} from 'vue';
import {getStoreData}from '@/request/api'
import {useRoute} from 'vue-router'
import { userStore } from '@/store/UserStore'
import { useRouter } from 'vue-router';

const rout = useRoute()
const users = userStore()
const router = useRouter()



const data = reactive({
    storeData:[],
    title:'',//店铺的名称
    img:''//店铺图片
})

const {storeData,title,img}={...toRefs(data)}

const getData = ()=>{
    getStoreData().then(res=>{
        if(res.status == 200){
        res.data.stores.forEach(item=>{
            if(item.title == rout.query.title){
                storeData.value = item.storeData
                title.value = item.title
                img.value = item.img
            }
        })
        }
    })
}

    onMounted(()=>{
        getData()
    })

    const addCart = ()=>{
        let newList = []
        storeData.value[0].data.items.forEach((item)=>{
            item.children.forEach((item2)=>{
                if(item2.num > 0){
                    newList.push(item2)
                }
            })
        })

        if(newList.length == 0){
            alert('请选择商品')
            return
        }

        //存储
        users.addCart(newList)
    }

    //跳转到购物车
    const toCart = ()=>{
        router.push('./cart')
    }
</script>

<style lang="less">
.foodClassify {
    height: 500px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 20px 20px 0 0;
    background-image: linear-gradient(#fff, #f5f5f5);

    .classify {
        margin-top: 10px;
    }

    .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        font-size: 18px;

        .store_img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-top: -30px;
        }
    }
}
</style>